<template>
    <!-- 系统管理风控条件 -->
    <div>
        <h4>风控条件配置管理</h4>
        <hr>
        <div class="riskhtml">
            <ul>
                <li>
                    <div class="top">
                        <span class="left">身份认证条件</span>
                    </div>
                    <div class="footer">
                        <div class="region">
                            <div>
                                <p>区域</p>
                                <ul>
                                    <li v-for="(item,index) in regions" :key="index">
                                        {{item}}
                                    </li>
                                </ul>
                            </div>
                            <el-button type="primary" @click="location = true">配置</el-button>
                            <el-dialog title="配置省份" :visible.sync="location" width="40%" :before-close="locationClose">
                                <m-location :location="regions"></m-location>
                                <span slot="footer" class="dialog-footer">
        <el-button @click="location = false">取 消</el-button>
        <el-button type="primary" @click="location = false">确 定</el-button>
      </span>
                            </el-dialog>
                        </div>
                        <div class="nation">
                            <div>
                                <p>民族</p>
                                <ul>
                                    <li>汉</li>
                                </ul>
                            </div>
                            <el-button type="primary" @click="nation=true">配置</el-button>
                             <el-dialog title="配置民族" :visible.sync="nation" width="30%" :before-close="nationClose">
                               <m-nation></m-nation>
                                <span slot="footer" class="dialog-footer">
                                <el-button @click="nation = false">取 消</el-button>
                                <el-button type="primary" @click="nation = false">确 定</el-button>
                                </span>
                            </el-dialog>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="top">
                        <span class="left">机型、芝麻分、年龄配置</span>
                        <el-button type="text" @click="newConfig = true" class="right"><span>新增配置</span></el-button>
                        <el-dialog title="机型、芝麻分、年龄配置" :visible.sync="newConfig" width="40%" :before-close="newConfigClose">
                            <new-config></new-config>
                            <span slot="footer" class="dialog-footer">
                            <el-button @click="newConfig = false">取 消</el-button>
                            <el-button type="primary" @click="newConfig = false">确 定</el-button>
                        </span>
                        </el-dialog>
                    </div>
                    <div>
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="style" label="设备类型" width="180">
                            </el-table-column>
                            <el-table-column prop="low" label="最低芝麻分" width="180">
                            </el-table-column>
                            <el-table-column prop="age" label="年龄段">
                            </el-table-column>
                            <el-table-column prop="oprate" label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small">编辑</el-button>
                                    <el-button type="text" size="small">删除</el-button>
                                 </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </li>
                <li>
                    <div class="top">
                        <span class="left">运营商记录配置</span>
                         <el-button type="text" @click="record = true" class="right"><span>运营商记录配置</span></el-button>
                        <el-dialog title="配置运营商记录" :visible.sync="record" width="40%" :before-close="recordClose">
                           <m-record></m-record>
                            <span slot="footer" class="dialog-footer">
                            <el-button @click="record = false">取 消</el-button>
                            <el-button type="primary" @click="record = false">确 定</el-button>
                        </span>
                        </el-dialog>

                    </div>
                    <div class="footer">
                       <el-row :gutter="50">
                        <el-col :span="12" v-for="(item,index) in recordList" :key="index">
                            <el-col :span='8'><span>{{item.name}}</span></el-col>
                            <el-col :span='16'> <span>{{item.value}}</span></el-col>
                        </el-col>
                    </el-row>
                    </div>
                </li>
                <li>
                    <div class="top">
                        <span class="left">自动分配时段</span>
                        <el-button type="text" @click="autoTime = true" class="right"><span>配置自动分配时段</span></el-button>
                    <el-dialog title="配置自动分配时段" :visible.sync="autoTime" width="40%" :before-close="autoTimeClose">
                    <m-time></m-time>
                        <span slot="footer" class="dialog-footer">
        <el-button @click="autoTime = false">取 消</el-button>
        <el-button type="primary" @click="autoTime = false">确 定</el-button>
      </span>
                        </el-dialog>

                    </div>
                    <div class="footer">
                        <p>开始</p>
                        <p>结束</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import lis from '../comm/lis.vue'
    import time from '../comm/time.vue'
    import newConfig from '../comm/newConfig.vue'
    import record from '../comm/record.vue'
    import location from '../comm/location.vue'
    import nation from '../comm/nation.vue'
    export default {
        data() {
            return {
                newConfig: false,
                record: false,
                autoTime: false,
                location: false,
                nation:false,
                tableData: [{
                        style: "iPhone 6s Plus",
                        low: "	600",
                        age: "22 - 32",
                        oprate: ""
                    },
                    {
                        style: "iPhone 6s Plus",
                        low: "	600",
                        age: "22 - 32",
                        oprate: ""
                    },
                    {
                        style: "iPhone 6s Plus",
                        low: "	600",
                        age: "22 - 32",
                        oprate: ""
                    },
                    {
                        style: "iPhone 6s Plus",
                        low: "	600",
                        age: "22 - 32",
                        oprate: ""
                    }
                ],
                regions: [
                    "安徽",
                    "北京",
                    "广东",
                    "广西",
                    "贵州",
                    "甘肃",
                    "河北",
                    "黑龙江",
                    "河南",
                    "湖北",
                    "湖南",
                    "海南",
                    "吉林",
                    "江苏",
                    "江西",
                    "辽宁",
                    "内蒙古",
                    "青海",
                    "山西",
                    "上海",
                    "山东",
                    "四川",
                    "陕西",
                    "台湾",
                    "天津",
                    "香港",
                    "西藏",
                    "新疆",
                    "云南",
                    "浙江",
                    "重庆",
                    "福建",
                    "外国"
                ],
                recordList: [{
                        name: '在网时长≥',
                        value: '90	'
                    },
                    {
                        name: '活跃天数≥',
                        value: '180	'
                    },
                    {
                        name: '主叫≥',
                        value: '180	'
                    },
                    {
                        name: '被叫≥',
                        value: '90	'
                    },
                    {
                        name: '联系号码数≥',
                        value: '50	'
                    },
                    {
                        name: '诈骗电话互通≤',
                        value: '50	'
                    },
                ],
                timeForm: {
                    data1: '',
                    data2: ''
                }
               
            };
        },
        methods: {
            newConfigClose(done) {
                done();
            },
            recordClose(done) {
                done()
            },
            autoTimeClose(done) {
                done()
            },
            locationClose(done) {
                done()
            },
            nationClose(done){
                done()
            }
        },
        components: {
            'new-config': newConfig,
            'm-record': record,
            'm-lis': lis,
            'm-time': time,
            'm-location': location,
            'm-nation':nation
        }
    };
</script>
<style lang="scss" scoped>
    h4 {
        font-weight: 500;
    }
    .main {
        font-size: 14px;
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    ul {
        margin: 0;
        padding: 0;
    }
   .riskhtml>ul li { 
        border: 1px solid #f1f1f1;
        list-style: none;
        margin-top: 20px;
        .top {
            padding: 0 10px;
            height: 30px;
            background-color: #f1f1f1;
            border-left: 2px solid #009688;
            span {
                line-height: 30px;
                font-size: 14px;
            }
            span:nth-child(2) {
                color: #009688;
            }
        }
    }
    .footer {
        .el-row {
            line-height: 40px;
        }
        li {
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 15px 5px;
            display: inline-block;
            padding: 5px;
        }
        table {
            padding: 10px;
            width: 80%;
            tr {
                display: inline-block;
                padding: 8px 0;
            }
            td:nth-child(2n-1) {
                width: 200px;
            }
        }
        p {
            font-weight: 700;
            padding-left: 20px;
            margin: 10px 0;
        }
        .region,
        .nation {
            display: flex;
            justify-content: space-between;
        }
        .region>div {
            display: flex;
            justify-content: flex-start;
            p {
                align-self: center;
                width: 80px;
            }
            li {
                margin: 5px 5px;
                padding: 5px 15px;
            }
        }
        .region>.el-button--primary,
        .nation>.el-button--primary {
            align-self: center;
            float: right;
            height: 30px;
            background-color: #009688;
            padding: 0px 20px;
            margin-right: 20px;
        }
        .nation>div {
            display: flex;
            p {
                align-self: center;
                width: 35px;
            }
            li {
                margin: 5px 5px;
                padding: 5px 15px;
            }
        }
    }
    .el-button--text {
        color: #009688;
        padding: 0;
    }
</style>
